<template>
  <!-- 重点：
1.slot外面包裹一层div 
2.计算属性和方法的区别：
  目前我的认知是：
  1.属性会根据数据的变化而实时的发生改变。
  2.方法只有在触发的时候才会生效-->

  <div id='TabBarItem' @click="itemclick" :style="textColor">
    <div v-if="!isActive">
      <slot name="active"></slot>
    </div>
    <div v-else>
      <slot name="inactive"></slot>
    </div>
    <div>
      <slot name="text"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TabBarItem',
    data() {
      return {
        // isActive: false
      }
    },
    props: {
      path: {
        type: String,
        default: ''
      },
      textcolor: {
        type: String,
        default: ''
      }
    },
    computed: {
      isActive() {
        return this.$route.path.indexOf(this.path) !== -1
      },
      textColor() {
        return this.isActive ? { color: this.textcolor } : {}
      }
    },
    methods: {
      itemclick() {
        // 错误做法：原因未知！！！
        // if (this.$route.path.indexOf(this.path) !== -1) {
        //   return this.isActive = true
        // } else {
        //   return this.isActive = false
        // }
        this.$router.replace(this.path)


      }

    },
  }
</script>

<style scoped>
  #TabBarItem {
    flex: 1;
    text-align: center;

  }

  #TabBarItem img {
    width: 24px;
    vertical-align: middle;
    padding: 3px 0;
  }

  .active {
    color: pink;
  }
</style>